import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import {
  Select,
  Button,
  Table,
  Input,
  message,
  Image,
  Modal,
  Upload,
} from "antd";
import {
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  SearchOutlined,
  ExclamationCircleFilled,
} from "@ant-design/icons";
import {
  text_check,
  post_axios,
  show_img_url,
  key_find_obj,
  img_url,
  random_string,
  get_suffix,
  status_code_list,
  format_time,
} from "../../utils";
import axios from "../../axios/index";
import "./index.scss";

export default function Wares(props) {
  const { t } = useTranslation();
  const [tableHeight, setTableHeight] = useState(0);
  const { confirm } = Modal;
  const { actions, setSpinning } = props;

  let { menu_action, user_power_lang, username, user_grade } = actions;
  user_power_lang = JSON.parse(user_power_lang);

  // 国内国外判断
  const session_company = sessionStorage.getItem("company");
  let localStorage_company = JSON.parse(localStorage.getItem("choose_company"));
  const local_company_object =
    localStorage_company &&
    localStorage_company[username] &&
    localStorage_company[username]
      ? localStorage_company[username]
      : "";

  //账号所属公司id
  const company_id = sessionStorage.getItem("company_id");
  const company_tongyi_bool =
    company_id == "15" ||
    company_id == "403" ||
    local_company_object.id == "15" ||
    local_company_object.id == "403";

  const [page, setPage] = useState(1);
  const [rows, setRows] = useState(20);
  const [total, setTotal] = useState(0);
  const [bar_lib, setBar_lib] = useState("");
  const [name_search, setName_search] = useState("");
  const [barcode_search, setBarcode_search] = useState([]);
  const [vision_search, setVision_search] = useState([]);
  const [goods_list, setGoods_list] = useState([]);

  const getData = async (newPage, newRows, newBar_lib) => {
    let upMsg = {
      page: newPage ? newPage : page,
      rows: newRows ? newRows : rows,
      company_id: local_company_object.id,
      company: local_company_object.company,
      bar_lib: newBar_lib ? newBar_lib : bar_lib,
      barcode_search: barcode_search,
      vision_search: vision_search,
      name_search: name_search,
    };
    setSpinning(true);
    let res = await post_axios("goods_manager", "m_query", upMsg);
    setSpinning(false);
    if (!res) return;
    const receiveRows = res.data_rows.rows.map((item) => {
      item["pic"] = show_img_url(item, local_company_object.company);
      return item;
    });
    setGoods_list(receiveRows);
    setTotal(res.data_rows.total);
  };
  const brandBool = Boolean(!(menu_action.indexOf("m_brand") > -1));
  const zyBool = Boolean(!(menu_action.indexOf("m_zy") > -1));
  const columns = [
    {
      dataIndex: "idx",
      align: "center",
      width: 40,
      render: (_, record, index) => <>{index + 1}</>,
    },
    {
      title: t("goods.goods_name"),
      dataIndex: "name",
      align: "center",
    },
    {
      title: t("goods.goods_image"),
      align: "center",
      render: (_, record) => (
        <>
          {record.pic && record.pic.length !== 0 ? (
            <Image className="table_img" src={record.pic} />
          ) : (
            ""
          )}
        </>
      ),
    },
    {
      title: "品牌",
      align: "center",
      children: [
        {
          title: "价格",
          align: "center",
          render: (_, record) => (
            <>
              {record.brand ? (
                <span>
                  {
                    key_find_obj(record.brand, goods_brand_list, "brand_number")
                      .brand_name
                  }
                </span>
              ) : (
                ""
              )}

              {record.price ? (
                <span>{(record.price / 100).toFixed(2)}</span>
              ) : (
                ""
              )}
            </>
          ),
        },
      ],
      hidden: brandBool,
    },
    {
      title: "智云编码",
      dataIndex: "barcode_zy",
      align: "center",
      hidden: zyBool,
    },
    {
      title: t("goods.goods_barcode"),
      dataIndex: "barcode",
      align: "center",
    },
    {
      title: t("goods.commodity_warehouse"),
      align: "center",
      render: (_, record) => (
        <>{key_find_obj(record.bar_lib, goods_kind_list, "kind")["name"]}</>
      ),
    },
  ];

  const onKindChange = (value) => {
    setBar_lib(value);
    getData(page, rows, value);
  };

  // 分页器
  const pageOnChange = async (page, pageSize) => {
    setPage(page);
    setRows(pageSize);
    initData(page, pageSize);
  };

  // 用户数据行点击
  const [clickRowKey, setClickRowKey] = useState("");
  const [clickRow, setclickRow] = useState({});

  const tableRowClick = (row) => {
    setClickRowKey(row.id);
    setclickRow(row);
  };

  const search_data = () => {
    setPage(1);
    initData(1);
  };

  const initData = (page, rows) => {
    setClickRowKey("");
    setclickRow([]);
    getData(page, rows);
  };

  const getBase64 = (img, callback) => {
    const reader = new FileReader();
    reader.addEventListener("load", () => callback(reader.result));
    reader.readAsDataURL(img);
  };

  // 添加/修改
  const [edit_type, setEdit_type] = useState("");
  const [editDialogshow, setEditDialogshow] = useState(false);
  const [editDialogtitle, setEditDialogtitle] = useState("");
  const [visual_cabinet_bool, setVisual_cabinet_bool] = useState(false);
  const [edit_add_type, setEdit_add_type] = useState("");
  const [edit_bar_lib, setEdit_bar_lib] = useState("");
  const [edit_goods_name, setEdit_goods_name] = useState("");
  const [edit_barcode, setEdit_barcode] = useState("");
  const [choose_goods_obj, setChoose_goods_obj] = useState({});
  const [bar_lib_obj, setBar_lib_obj] = useState("");
  const [edit_barcode_zy, setEdit_barcode_zy] = useState("");

  const [imageUrl, setImageUrl] = useState("");
  const [fileList, setFileList] = useState({});

  const edit_customer_dialog_show = async (value, action) => {
    setEdit_type(value);
    if (value === "add") {
      setEditDialogshow(true);
      setEditDialogtitle(t("common.add"));
      setEdit_add_type(action);

      setEdit_goods_name("");
      setTimeout(() => {
        setEdit_bar_lib(bar_lib);
      }, 100);
      setEdit_barcode("");
      setEdit_barcode_zy("");
      setImageUrl("");
      setFileList({});
    } else {
      if (clickRowKey === "") {
        message.warning({
          content: t("goods.choose_one_customer"),
        });
        return;
      }
      setEditDialogshow(true);
      setEditDialogtitle(t("common.change"));
      const { name, bar_lib, barcode, barcode_zy, pic } = clickRow;

      setEdit_goods_name(name);
      setTimeout(() => {
        setEdit_bar_lib(bar_lib);
      }, 100);
      setEdit_barcode(barcode);

      setEdit_barcode_zy(barcode_zy ? barcode_zy : "");
      if (origin === "easytouch" || pic.indexOf("http") == -1) {
        setImageUrl(
          `${img_url}/PIC/${local_company_object.company}/${clickRowKey.pic}`
        );
      } else {
        setImageUrl(pic);
      }
      setFileList({});
    }
    edit_bar_lib_change(edit_bar_lib);
  };

  const edit_bar_lib_change = (value) => {
    const newBar_lib_obj = key_find_obj(value, goods_kind_list, "kind");
    setBar_lib_obj(newBar_lib_obj);
    setEdit_bar_lib(value);
    const showBool =
      !!newBar_lib_obj.goods_vision_type &&
      newBar_lib_obj?.goods_vision_type !== "default" &&
      newBar_lib_obj?.goods_vision_type !== "";
    setVisual_cabinet_bool(showBool);
  };

  const upload_change = (data) => {
    const { file, fileList } = data;
    const uploadFile = fileList[0];
    console.log(uploadFile);
    const isJPG =
      uploadFile.originFileObj.type === "image/jpeg" ||
      uploadFile.originFileObj.type === "image/png";
    const isLt5M = uploadFile.originFileObj.size / 1024 <= 500;
    if (!isJPG) {
      message.warning({
        content: t("goods.only_pic"),
      });
      return false;
    } else if (!isLt5M) {
      message.warning({
        content: t("goods.only_500k"),
      });
      return false;
    } else {
      setFileList(uploadFile.originFileObj);
      getBase64(uploadFile.originFileObj, (url) => {
        setImageUrl(url);
      });
    }
  };
  const picUpload = (file) => {
    let fileObj = file;
    let data = oss_params;
    let ossData = new FormData();
    ossData.append("name", fileObj.name);
    //key就代表文件层级和阿里云上的文件名
    let filename = fileObj.name;
    let picName = random_string(32) + get_suffix(filename);
    let keyValue = data.dir + picName;
    ossData.append("key", keyValue);
    ossData.append("policy", data.policy);
    ossData.append("OSSAccessKeyId", data.access_id);
    ossData.append("success_action_status", "200");
    ossData.append("signature", data.signature);
    ossData.append("file", fileObj);

    return new Promise((resolve, reject) => {
      axios
        .post(`https://${data.host}`, ossData, {
          header: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((res) => {
          if (res.status == 200) {
            resolve(picName);
          } else {
            reject(false);
          }
        })
        .catch((error) => {
          reject(false);
        });
    });
  };

  const [
    visual_cabinet_choose_goods_show,
    setVisual_cabinet_choose_goods_show,
  ] = useState(false);
  const [
    visual_cabinet_choose_goods_page,
    setVisual_cabinet_choose_goods_page,
  ] = useState(1);
  const [
    visual_cabinet_choose_goods_rows,
    setVisual_cabinet_choose_goods_rows,
  ] = useState(20);
  const [
    visual_cabinet_choose_goods_total,
    setVisual_cabinet_choose_goods_total,
  ] = useState(0);
  const [
    visual_cabinet_choose_goods_name_search,
    setVisual_cabinet_choose_goods_name_search,
  ] = useState("");
  const [
    visual_cabinet_choose_goods_from_search,
    setVisual_cabinet_choose_goods_from_search,
  ] = useState("");
  const [
    visual_cabinet_choose_goods_status_search,
    setVisual_cabinet_choose_goods_status_search,
  ] = useState("1");
  const [
    visual_cabinet_choose_goods_barcode_search,
    setVisual_cabinet_choose_goods_barcode_search,
  ] = useState("");
  const [
    visual_cabinet_choose_goods_goods_list,
    setVisual_cabinet_choose_goods_goods_list,
  ] = useState([]);
  const visual_cabinet_choose_goods_goods_search = async () => {
    setVisual_cabinet_choose_goods_page(1);
    if (company_tongyi_bool) {
      tongyi_check_value_get_data();
    } else {
      await get_visual_cabinet_choose_goods_data({ page: 1 });
    }
  };
  // 获取商品库列表
  const get_visual_cabinet_choose_goods_data = async (propsMsg = {}) => {
    const {
      page: newPage = visual_cabinet_choose_goods_page,
      rows: newRows = visual_cabinet_choose_goods_rows,
      goods_vision_type = bar_lib_obj.goods_vision_type,
    } = propsMsg;
    let upMsg = {
      page: newPage,
      rows: newRows,
      company_id: local_company_object.id,
      company: local_company_object.company,
      barcode: visual_cabinet_choose_goods_barcode_search,
      name: visual_cabinet_choose_goods_name_search,
      goods_vision_type: goods_vision_type,
      sku_origin: visual_cabinet_choose_goods_from_search,
      status: visual_cabinet_choose_goods_status_search,
    };
    setSpinning(true);
    let res = await post_axios("vision_mch_goods", "m_query", upMsg);
    setSpinning(false);
    if (!res) return;
    const receiveRows = res.data_rows.rows.map((item) => {
      item["pic_show"] = show_img_url(item, local_company_object.company);
      return item;
    });
    setVisual_cabinet_choose_goods_goods_list(receiveRows);
    setVisual_cabinet_choose_goods_total(res.data_rows.total);
  };

  // 上海统一专用
  const tongyi_get_visual_cabinet_choose_goods_data = async (propsMsg = {}) => {
    const {
      page: newPage = visual_cabinet_choose_goods_page,
      rows: newRows = visual_cabinet_choose_goods_rows,
    } = propsMsg;
    let upMsg = {
      page: newPage,
      rows: newRows,
      company_id: local_company_object.id,
      company: local_company_object.company,
      bar_lib: "ALL",
      vision_search: "Y",
      name_search: visual_cabinet_choose_goods_name_search,
    };
    setSpinning(true);
    let res = await post_axios("goods_manager", "m_query", upMsg);
    setSpinning(false);
    if (!res) return;
    const receiveRows = res.data_rows.rows.map((item) => {
      item["pic_show"] = show_img_url(item, local_company_object.company);
      return item;
    });
    setVisual_cabinet_choose_goods_goods_list(receiveRows);
    setVisual_cabinet_choose_goods_total(res.data_rows.total);
  };

  // 分页器
  const visual_cabinet_choose_goods_handleSizeChange = (page, rows) => {
    setVisual_cabinet_choose_goods_page(page);
    setVisual_cabinet_choose_goods_rows(rows);
    if (company_tongyi_bool) {
      tongyi_check_value_get_data({ page, rows });
    } else {
      get_visual_cabinet_choose_goods_data({ page, rows });
    }
  };

  const visual_cabinet_choose_goods = async () => {
    await get_visual_cabinet_choose_goods_data();
    setVisual_cabinet_choose_goods_show(true);
  };

  const tongyi_visual_cabinet_choose_goods = async () => {
    setVisual_cabinet_choose_goods_goods_list([]);
    setVisual_cabinet_choose_goods_total(0);
    tongyi_check_value_get_data();
  };

  const tongyi_check_value_get_data = async (msg) => {
    if (edit_add_type == "m_introduce") {
      //引入商品就从default中拿
      await tongyi_get_visual_cabinet_choose_goods_data(msg);
      setVisual_cabinet_choose_goods_show(true);
    } else {
      if (bar_lib_obj.kind !== "ALL") {
        //不是default库就从default中拿
        await tongyi_get_visual_cabinet_choose_goods_data(msg);
      } else {
        //是default库就只能从商品总库拿
        await get_visual_cabinet_choose_goods_data({ type: "default", ...msg });
      }
      setVisual_cabinet_choose_goods_show(true);
    }
  };

  // 点击选择商品
  const visual_cabinet_choose_goods_btn_func = async (value) => {
    setChoose_goods_obj(value);
    let { name, pic, barcode, origin } = value;
    setEdit_goods_name(name);
    setEdit_barcode(barcode);
    if (origin === "easytouch" || pic.indexOf("http") == -1) {
      setImageUrl(`${img_url}/PIC/${local_company_object.company}/${pic}`);
    } else {
      setImageUrl(`${pic}`);
    }
    setVisual_cabinet_choose_goods_show(false);
  };
  const editConfirm = async () => {
    if (edit_bar_lib === "") {
      message.warning({
        content: t("goods.enter_sub_treasury"),
      });
      return;
    }
    if (edit_goods_name === "") {
      message.warning({
        content: t("goods.enter_goods_name"),
      });
      return;
    }

    if (edit_barcode === "" || edit_barcode.length < 4) {
      message.warning({
        content: t("goods.enter_goods_barcode"),
      });
      return;
    }

    let upload_res = "";
    if (visual_cabinet_bool) {
      // 视觉柜
      upload_res = imageUrl;
    } else if (edit_type == "change" && Object.keys(fileList).length == 0) {
      // 修改状态下，fileList为空代表为上传新图片，继续使用原有图片
      upload_res = clickRow.pic;
    } else if (Object.keys(fileList).length !== 0) {
      //fileList不为空则代表新上传了图片，赋值即可
      upload_res = await picUpload(fileList);
    } else {
      message.warning({
        content: t("goods.choose_pic"),
      });
      return;
    }
    if (!upload_res) {
      message.warning({
        content: t("goods.picture_upload_fail"),
      });
      return;
    }
    let upMsg = {
      bar_lib: edit_bar_lib,
      name: edit_goods_name,
      barcode: edit_barcode,
      pic: upload_res,
      origin: choose_goods_obj.origin,
      id: choose_goods_obj.id,

      goods_vision_type: bar_lib_obj.goods_vision_type,
      code_alipay: choose_goods_obj.code_alipay,
      code_cloudwalk: choose_goods_obj.code_cloudwalk,
      price: choose_goods_obj.price,
      brand: choose_goods_obj.brand,
      barcode_zy: menu_action.indexOf("m_zy") > -1 ? edit_barcode_zy : "",

      company_id: local_company_object.id,
      company: local_company_object.company,
    };

    let action = "m_add";
    if (edit_type == "change") {
      action = "m_modify";
      upMsg["barcode_old"] = clickRow.barcode;
    }
    setSpinning(true);
    let res = await post_axios("goods_manager", action, upMsg);
    setSpinning(false);
    if (!res) return;
    message.success({
      content: editDialogtitle + " " + t("common.successfully"),
    });
    setEditDialogshow(false);
    search_data();
  };

  const tongyi_edit_com_confirm = async () => {
    let upMsg = {
      bar_lib: edit_bar_lib,
      name: edit_goods_name,
      barcode: edit_barcode,
      pic: choose_goods_obj.pic,
      origin: choose_goods_obj.origin,
      id: choose_goods_obj.id,

      goods_vision_type: bar_lib_obj.goods_vision_type,
      code_alipay: choose_goods_obj.code_alipay,
      code_cloudwalk: choose_goods_obj.code_cloudwalk,
      price: choose_goods_obj.price,
      brand: choose_goods_obj.brand,

      company_id: local_company_object.id,
      company: local_company_object.company,
    };

    let action = edit_add_type;
    if (edit_type == "change") {
      action = "m_modify";
      upMsg["barcode_old"] = clickRow.barcode;
    }
    setSpinning(true);
    let res = await post_axios("goods_manager", action, upMsg);
    setSpinning(false);
    if (!res) return;
    message.success({
      content: editDialogtitle + " " + t("common.successfully"),
    });
    setEditDialogshow(false);
    search_data();
  };
  const delete_goods = () => {
    if (clickRowKey === "") {
      message.warning({
        content: t("goods.choose_one_customer"),
      });
      return;
    }
    confirm({
      title: t("common.info"),
      icon: <ExclamationCircleFilled />,
      content: (
        <div>
          {t("goods.sure_to_delete_goods")}
          <strong> {clickRow.name}</strong>
        </div>
      ),
      onOk: async () => {
        let upMsg = {
          bar_lib: clickRow.bar_lib,
          name: clickRow.name,
          barcode: clickRow.barcode,
          pic: clickRow.pic,
          company_id: local_company_object.id,
          company: local_company_object.company,
          origin: clickRow.origin,
          id: clickRow.id,
        };
        setSpinning(true);
        let res = await post_axios("goods_manager", "m_del", upMsg);
        setSpinning(false);
        if (!res) return;
        message.success({
          content: t("common.delete_success"),
        });
        search_data();
      },
      onCancel() {
        console.log("Cancel");
      },
    });
  };

  // 导出
  const [export_data_show, setExport_data_show] = useState(false);
  const [export_ranks_list, setExport_ranks_list] = useState([]);
  const export_data = async () => {
    await get_export_ranks_data();
    setExport_data_show(true);
  };
  const get_export_ranks_data = async () => {
    let upMsg = {
      company_id: local_company_object.id,
      company: local_company_object.company,
      down_type: "goods_info",
    };
    setSpinning(true);
    let res = await post_axios("task_export", "m_query", upMsg);
    setSpinning(false);
    if (!res) return;
    setExport_ranks_list(res.data_rows.rows);
  };

  const add_export_ranks = async () => {
    let upMsg = {
      company_id: local_company_object.id,
      company: local_company_object.company,
      bar_lib: bar_lib,
      down_type: "goods_info",
    };
    setSpinning(true);
    let res = await post_axios("goods_manager", "m_export", upMsg);
    setSpinning(false);
    if (!res) return;
    get_export_ranks_data();
  };
  const download_export_data = (item) => {
    window.open(item.export_url);
  };
  const delete_export_data = async (item) => {
    let upMsg = {
      company_id: local_company_object.id,
      company: local_company_object.company,
      id: item.id,
      export_name: item.export_name,
    };
    setSpinning(true);
    let res = await post_axios("task_export", "m_del", upMsg);
    if (!res) return;
    setSpinning(false);
    message.warning({
      content: t("common.delete_success"),
    });
    get_export_ranks_data();
  };

  // 获取分库
  const [goods_kind_list, setGoods_kind_list] = useState([]);
  const get_goods_kind = async () => {
    let upMsg = {
      company_id: local_company_object.id,
      company: local_company_object.company,
      op_type: "list_goods_kind",
    };
    let res = await post_axios("admin_oneself", "m_query", upMsg);
    if (!res) return;
    setGoods_kind_list(res.data_rows.rows);
    setBar_lib(res.data_rows.rows[0].kind);
    getData(page, rows, res.data_rows.rows[0].kind).then(() => {
      const tabBoxHeight =
        document.getElementsByClassName("goods_manager")[0].scrollHeight;
      const tableHeight = tabBoxHeight - 96 - 70 - 39;
      setTableHeight(tableHeight);
    });
  };

  // 获取品牌
  const [goods_brand_list, setGoods_brand_list] = useState([]);
  const get_goods_brand = async () => {
    let upMsg = {
      company_id: local_company_object.id,
      company: local_company_object.company,
      op_type: "list_goods_kind",
    };
    let res = await post_axios("brand", "m_query", upMsg);
    if (!res) return;
    setGoods_brand_list(res.data_rows.rows);
  };
  const [oss_params, setOss_params] = useState({});
  const get_oss_params = async () => {
    let upMsg = {
      op_type: "PIC",
    };
    let res = await post_axios("generate_post_policy", "m_query", upMsg);
    if (!res) return;
    setOss_params(res.data);
  };

  const chooseWaresColumns = [
    {
      dataIndex: "idx",
      align: "center",
      width: 40,
      render: (_, record, index) => <>{index + 1}</>,
    },
    {
      title: t("goods.goods_name"),
      dataIndex: "name",
      align: "center",
    },
    {
      title: t("goods.goods_image"),
      align: "center",
      render: (_, record) => (
        <>
          {record.pic && record.pic.length !== 0 ? (
            <Image className="table_img" src={record.pic} />
          ) : (
            ""
          )}
        </>
      ),
    },
    {
      title: "品牌",
      align: "center",
      children: [
        {
          title: "价格",
          align: "center",
          render: (_, record) => (
            <>
              {record.brand ? (
                <span>
                  {
                    key_find_obj(record.brand, goods_brand_list, "brand_number")
                      .brand_name
                  }
                </span>
              ) : (
                ""
              )}

              {record.price ? (
                <span>{(record.price / 100).toFixed(2)}</span>
              ) : (
                ""
              )}
            </>
          ),
        },
      ],
      hidden: brandBool,
    },

    {
      title: "阿里码",
      align: "center",
      children: [
        {
          title: "云从码",
          align: "center",
          render: (_, record) => (
            <>
              {record.code_cloudwalk ? (
                <span>{record.code_cloudwalk}</span>
              ) : (
                ""
              )}

              {record.code_alipay ? <span>{record.code_alipay}</span> : ""}
            </>
          ),
        },
      ],
      hidden: company_tongyi_bool,
    },
    {
      title: t("operate.choose_goods"),
      align: "center",
      render: (_, record) => (
        <>
          <Button
            size="small"
            type="primary"
            onClick={() => visual_cabinet_choose_goods_btn_func(record)}
          >
            {t("assets.select_product")}
          </Button>
        </>
      ),
    },
  ];
  const exportRanksColumns = [
    {
      dataIndex: "idx",
      align: "center",
      width: 40,
      render: (_, record, index) => <>{index + 1}</>,
    },
    {
      title: t("operate.time"),
      align: "center",
      render: (_, record) => (
        <>{record.op_time ? format_time(record.op_time, "type_s") : ""}</>
      ),
    },
    {
      title: t("transaction_flow.file_name"),
      align: "center",
      width: 300,
      dataIndex: "export_name",
    },
    {
      title: t("transaction_flow.status"),
      align: "center",
      render: (_, record) => (
        <>{text_check(status_code_list[record.status_code])}</>
      ),
    },
    {
      title: t("transaction_flow.operation"),
      align: "center",
      render: (_, record) => (
        <>
          <Button
            size="small"
            type="primary"
            style={{
              marginRight: "10px",
            }}
            onClick={() => download_export_data(record)}
            disabled={record.status_code !== "Success"}
          >
            {t("transaction_flow.download")}
          </Button>
          <Button
            size="small"
            type="primary"
            danger
            onClick={() => delete_export_data(record)}
          >
            {t("transaction_flow.delete")}
          </Button>
        </>
      ),
    },
  ];
  useEffect(() => {
    // 挂载后或者更新后的操作
    get_goods_kind();
    get_goods_brand();
    get_oss_params();
  }, []);
  return (
    <>
      <div className="goods_manager modules">
        <div className="screen_ipt">
          <div className="ipt_box">
            <div className="ipt_box_title">
              {t("goods.commodity_warehouse")}
            </div>
            <Select
              size="small"
              placeholder=" "
              options={goods_kind_list}
              fieldNames={{
                label: "name",
                value: "kind",
              }}
              value={bar_lib}
              onChange={onKindChange}
            />
          </div>

          <div className="ipt_box">
            <div className="ipt_box_title">{t("goods.goods_name")}</div>
            <Input
              placeholder=" "
              value={name_search}
              size="small"
              allowClear={true}
              onChange={(e) => setName_search(e.target.value)}
            />
          </div>
          <div className="ipt_box">
            <div className="ipt_box_title">{t("goods.goods_barcode")}</div>
            <Input
              placeholder=" "
              value={barcode_search}
              size="small"
              allowClear={true}
              onChange={(e) => setBarcode_search(e.target.value)}
            />
          </div>
          <div className="ipt_box">
            <div className="ipt_box_title">{t("common.status")}</div>
            <Select
              size="small"
              placeholder=" "
              options={[
                {
                  label: "ALL",
                  value: "",
                  key: "",
                },
                {
                  label: "视觉商品",
                  value: "Y",
                  key: "Y",
                },
                {
                  label: "普通商品",
                  value: "N",
                  key: "N",
                },
              ]}
              value={vision_search}
              onChange={(value) => setVision_search(value)}
            />
          </div>
        </div>
        <div className="screen_btn">
          <div className="btn_box">
            {/* 添加 */}
            {menu_action.indexOf("m_add") > -1 ? (
              <Button
                size="small"
                type="text"
                icon={<PlusOutlined style={{ color: "#1677FF" }} />}
                onClick={() => edit_customer_dialog_show("add", "m_add")}
              >
                {text_check(user_power_lang["m_add"])}
              </Button>
            ) : (
              ""
            )}
            {/* 引入 */}
            {menu_action.indexOf("m_introduce") > -1 ? (
              <Button
                size="small"
                type="text"
                icon={<PlusOutlined style={{ color: "#1677FF" }} />}
                onClick={() => edit_customer_dialog_show("add", "m_introduce")}
              >
                {text_check(user_power_lang["m_introduce"])}
              </Button>
            ) : (
              ""
            )}
            {/* 修改 */}
            {menu_action.indexOf("m_modify") > -1 ? (
              <Button
                size="small"
                type="text"
                icon={<EditOutlined style={{ color: "#1677FF" }} />}
                onClick={() => edit_customer_dialog_show("change")}
              >
                {text_check(user_power_lang["m_modify"])}
              </Button>
            ) : (
              ""
            )}
            {/* 删除 */}
            {menu_action.indexOf("m_del") > -1 ? (
              <Button
                size="small"
                type="text"
                onClick={delete_goods}
                icon={<DeleteOutlined style={{ color: "#1677FF" }} />}
              >
                {text_check(user_power_lang["m_del"])}
              </Button>
            ) : (
              ""
            )}

            {/* 导出 */}
            {menu_action.indexOf("m_export") > -1 ? (
              <Button
                size="small"
                type="text"
                icon={<DeleteOutlined style={{ color: "#1677FF" }} />}
                onClick={export_data}
              >
                {text_check(user_power_lang["m_export"])}
              </Button>
            ) : (
              ""
            )}
            {/* 查询 */}
            {menu_action.indexOf("m_query") > -1 ? (
              <Button
                size="small"
                type="text"
                icon={<SearchOutlined style={{ color: "#1677FF" }} />}
                onClick={search_data}
              >
                {text_check(user_power_lang["m_query"])}
              </Button>
            ) : (
              ""
            )}
          </div>
        </div>
        <div className="table_box">
          <div
            className="page-table"
            id="page-child-table"
            style={{
              width: "99.9vw",
            }}
          >
            <Table
              dataSource={goods_list}
              size="small"
              bordered
              columns={columns}
              rowKey="id"
              virtual
              scroll={{
                y: tableHeight,
              }}
              onRow={(record) => {
                return {
                  onClick: () => tableRowClick(record), // 点击行
                };
              }}
              rowClassName={(record, index) => {
                if (record.id == clickRowKey) {
                  return "row_clicked_style";
                }
              }}
              rowHoverable={false}
              pagination={{
                defaultCurrent: page,
                defaultPageSize: rows,
                size: "small",
                current: page,
                total: total,
                responsive: true,
                showTotal: (total) =>
                  text_check({
                    msg_cn: `共 ${total} 条`,
                    msg_en: `Total ${total} items`,
                  }),
                onChange: pageOnChange,
              }}
            />
          </div>
        </div>
      </div>

      <Modal
        title={editDialogtitle}
        open={editDialogshow}
        onOk={company_tongyi_bool ? tongyi_edit_com_confirm : editConfirm}
        onCancel={() => setEditDialogshow(false)}
        classNames={{ body: "edit_dialog_body" }}
        maskClosable={false}
        destroyOnClose={true}
      >
        {company_tongyi_bool ? (
          <>
            <div className="dialog_ipt_box">
              <div className="ipt_box_title">
                {t("goods.sub_treasury_number")}
              </div>
              <Select
                placeholder=" "
                options={goods_kind_list}
                fieldNames={{
                  label: "name",
                  value: "kind",
                }}
                value={edit_bar_lib}
                onChange={edit_bar_lib_change}
                disabled={edit_type === "change"}
              />
            </div>
            <div
              className="dialog_transparent_model"
              onClick={tongyi_visual_cabinet_choose_goods}
              style={{ zIndex: "10" }}
            ></div>
            <div className="dialog_ipt_box">
              <div className="ipt_box_title">{t("goods.goods_name")}</div>
              <Input
                placeholder=" "
                value={edit_goods_name}
                onChange={(e) => setEdit_goods_name(e.target.value)}
              />
            </div>
            <div className="dialog_ipt_box">
              <div className="ipt_box_title">{t("goods.goods_barcode")}</div>
              <Input
                placeholder=" "
                value={edit_barcode}
                onChange={(e) => setEdit_barcode(e.target.value)}
              />
            </div>

            <div className="dialog_ipt_box">
              <div className="ipt_box_title">{t("goods.goods_image")}</div>
              <div
                className="dialog_upload"
                style={{ display: "flex", justifyContent: "flex-start" }}
              >
                <Upload
                  name="avatar"
                  listType="picture-card"
                  className="avatar-uploader"
                  showUploadList={false}
                  onChange={upload_change}
                  disabled={visual_cabinet_bool}
                  beforeUpload={() => false}
                  maxCount={1}
                >
                  {imageUrl ? (
                    <img
                      src={imageUrl}
                      alt="avatar"
                      style={{
                        width: "100%",
                      }}
                    />
                  ) : (
                    <button
                      style={{
                        border: 0,
                        background: "none",
                      }}
                      type="button"
                    >
                      <PlusOutlined />
                      <div
                        style={{
                          marginTop: 8,
                        }}
                      >
                        Upload
                      </div>
                    </button>
                  )}
                </Upload>
              </div>
            </div>
          </>
        ) : (
          <>
            <div className="dialog_ipt_box">
              <div className="ipt_box_title">
                {t("goods.sub_treasury_number")}
              </div>
              <Select
                placeholder=" "
                options={goods_kind_list}
                fieldNames={{
                  label: "name",
                  value: "kind",
                }}
                value={edit_bar_lib}
                onChange={edit_bar_lib_change}
                disabled={edit_type === "change"}
              />
            </div>
            {visual_cabinet_bool ? (
              <div
                className="dialog_transparent_model"
                onClick={visual_cabinet_choose_goods}
                style={{ zIndex: "10" }}
              ></div>
            ) : (
              ""
            )}

            <div className="dialog_ipt_box">
              <div className="ipt_box_title">{t("goods.goods_name")}</div>
              <Input
                placeholder=" "
                value={edit_goods_name}
                onChange={(e) => setEdit_goods_name(e.target.value)}
              />
            </div>
            <div className="dialog_ipt_box">
              <div className="ipt_box_title">{t("goods.goods_barcode")}</div>
              <Input
                placeholder=" "
                value={edit_barcode}
                onChange={(e) => setEdit_barcode(e.target.value)}
                disabled={visual_cabinet_bool}
              />
            </div>

            <div className="dialog_ipt_box">
              <div className="ipt_box_title">{t("goods.goods_image")}</div>
              <div
                className="dialog_upload"
                style={{ display: "flex", justifyContent: "flex-start" }}
              >
                <Upload
                  name="avatar"
                  listType="picture-card"
                  className="avatar-uploader"
                  showUploadList={false}
                  action=""
                  onChange={upload_change}
                  disabled={visual_cabinet_bool}
                  beforeUpload={() => false}
                  maxCount={1}
                >
                  {imageUrl ? (
                    <img
                      src={imageUrl}
                      alt="avatar"
                      style={{
                        width: "100%",
                      }}
                    />
                  ) : (
                    <button
                      style={{
                        border: 0,
                        background: "none",
                      }}
                      type="button"
                    >
                      <PlusOutlined />
                      <div
                        style={{
                          marginTop: 8,
                        }}
                      >
                        Upload
                      </div>
                    </button>
                  )}
                </Upload>
              </div>
            </div>

            {menu_action.indexOf("m_zy") > -1 ? (
              <div className="dialog_ipt_box">
                <div className="ipt_box_title">智云条码</div>
                <Input
                  placeholder=" "
                  value={edit_barcode_zy}
                  onChange={(e) => setEdit_barcode_zy(e.target.value)}
                />
              </div>
            ) : (
              ""
            )}
          </>
        )}
      </Modal>

      <Modal
        title={t("system_manager.kind")}
        open={visual_cabinet_choose_goods_show}
        onOk={false}
        onCancel={() => setVisual_cabinet_choose_goods_show(false)}
        classNames={{ body: "edit_dialog_body", wrapper: "fullscreen" }}
        maskClosable={false}
        destroyOnClose={true}
      >
        <div className="dialog_btn_box">
          <div className="ipt_box">
            <div className="ipt_box_title">{t("goods.goods_name")}</div>
            <Input
              placeholder=" "
              value={visual_cabinet_choose_goods_name_search}
              size="small"
              allowClear={true}
              onChange={(e) =>
                setVisual_cabinet_choose_goods_name_search(e.target.value)
              }
            />
          </div>
          <template v-if="!company_tongyi_bool">
            <div className="ipt_box">
              <div className="ipt_box_title">{t("goods.status")}</div>
              <Select
                size="small"
                placeholder=" "
                options={[
                  {
                    label: "上架成功",
                    value: "1",
                  },
                  {
                    label: "审核中",
                    value: "2",
                  },
                  {
                    label: "上架失败",
                    value: "3",
                  },
                ]}
                value={visual_cabinet_choose_goods_status_search}
                onChange={(value) =>
                  setVisual_cabinet_choose_goods_status_search(value)
                }
              />
            </div>
          </template>

          <Button
            size="small"
            shape="circle"
            icon={<SearchOutlined />}
            onClick={visual_cabinet_choose_goods_goods_search}
          />
        </div>
        <div className="page-table">
          <Table
            dataSource={visual_cabinet_choose_goods_goods_list}
            size="small"
            bordered
            columns={chooseWaresColumns}
            rowKey="id"
            virtual
            scroll={{
              y: tableHeight,
            }}
            rowHoverable={false}
            pagination={{
              defaultCurrent: visual_cabinet_choose_goods_page,
              defaultPageSize: visual_cabinet_choose_goods_rows,
              size: "small",
              current: visual_cabinet_choose_goods_page,
              total: visual_cabinet_choose_goods_total,
              responsive: true,
              showTotal: (total) =>
                text_check({
                  msg_cn: `共 ${total} 条`,
                  msg_en: `Total ${total} items`,
                }),
              onChange: visual_cabinet_choose_goods_handleSizeChange,
            }}
          />
        </div>
      </Modal>

      <Modal
        title={t("transaction_flow.export")}
        open={export_data_show}
        onOk={false}
        onCancel={() => setExport_data_show(false)}
        classNames={{ body: "edit_dialog_body", wrapper: "edit_900_style" }}
        maskClosable={false}
        destroyOnClose={true}
      >
        <div className="export_btn">
          <div className="btn_box">
            {/* 添加 */}
            <Button
              size="small"
              type="text"
              icon={<PlusOutlined style={{ color: "#1677FF" }} />}
              onClick={add_export_ranks}
            >
              {text_check(user_power_lang["m_add"])}
            </Button>
            {/* 查询 */}
            <Button
              size="small"
              type="text"
              icon={<SearchOutlined style={{ color: "#1677FF" }} />}
              onClick={get_export_ranks_data}
            >
              {text_check(user_power_lang["m_query"])}
            </Button>
          </div>
        </div>

        <div className="noPage-table" style={{ height: "300px" }}>
          <Table
            dataSource={export_ranks_list}
            size="small"
            bordered
            columns={exportRanksColumns}
            rowKey="id"
            virtual
            scroll={{
              y: 300,
            }}
            rowHoverable={false}
            pagination={false}
          />
        </div>
      </Modal>
    </>
  );
}
